<!--
 * @Author: 你的名字
 * @Date: 2022-09-22 10:47:09
 * @FilePath: /demo-gather/src/components/normal/multLogin.vue
 * @Description: 多种方式登陆
-->
<template>
  <div>
    <el-card class="box-card" width="500px">
      <div slot="header" class="clearfix">
        <span class="name">登录模块</span>
        <!-- <el-button style="float: right; padding: 3px 0" type="text"
          >操作按钮</el-button
        > -->
      </div>
      <el-form ref="form" :model="form" label-width="80px">
  <el-form-item label="">
    <el-input v-model="value"></el-input>
  </el-form-item>
  <el-form-item label="">
    <el-button
      type="primary"
      class="login-button-submit"
      @click.prevent="onSubmit('loginForm')"
      >{{ "登陆" }}</el-button
    >
  </el-form-item>
  </el-form>
      <!-- <img :src="codeImage" class="code-image" @click="getCodeImage" /> -->
    
   
    </el-card>

  </div>
</template>
<script>
// import http from "@/lib/http";
// import vue from 'vue';
import axios from "axios";

// 获取图片流处理
const createPngImage = (data) => {
  const str = btoa(
    new Uint8Array(data).reduce(
      (data, byte) => data + String.fromCharCode(byte),
      ""
    )
  );
  return `data:image/png;base64,${str}`;
};
// 生成随机验证码
const createRandomCode = (len, radix) => {
  const chars =
    "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz".split("");
  const uuid = [];
  radix = radix || chars.length;

  if (len) {
    // Compact form
    for (let i = 0; i < len; i++) uuid[i] = chars[0 | (Math.random() * radix)];
  } else {
    let r;
    uuid[8] = uuid[13] = uuid[18] = uuid[23] = "-";
    uuid[14] = "4";
    for (let i = 0; i < 36; i++) {
      if (!uuid[i]) {
        r = 0 | (Math.random() * 16);
        uuid[i] = chars[i === 19 ? (r & 0x3) | 0x8 : r];
      }
    }
  }
  return uuid.join("") + new Date().getTime();
};
// 获取验证码
const getVerificationCode = function (params) {
  const response = axios.get("/auth/captcha", {
    params: params,
    responseType: "arraybuffer",
  });
  return response;
};
export default {
  data() {
    return {
      form:{},
      codeImage: "",
      value: "",
      randomId: createRandomCode(24, 16),
    };
  },
  mounted() {
    // this.getCodeImage()
  },
  methods: {
    // 获取验证码图片
    getCodeImage() {
      const params = {
        key: this.randomId,
        responseType: "arraybuffer",
      };
      getVerificationCode(params)
        .then((data) => {
          return createPngImage(data.data);
        })
        .then((response) => {
          this.codeImage = response;
        });
    },
  },
};
</script>
<style lang="less">

.clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    margin: 0 auto;
    width: 4.8rem;
    .name{
      font-size: .16rem;
    }
  }
  .el-form-item__content {
    margin-left: 0;
  }
  </style>
